<template>

    <div label="我的活动">
      <div class="search-box">
        <div class="search-item">
          <div class="search-label">状态:</div>
          <div class="search-content">
            <el-select v-model="permission" placeholder="请选择"  size="mini" clearable="">
              <el-option  key="0" label="待审核" value="0"></el-option>
              <el-option  key="1" label="通过" value="1"></el-option>
              <el-option  key="-1" label="未通过" value="-1"></el-option>
            </el-select>
          </div>
        </div>

        <div class="search-item">
          <el-button type="primary" size="mini" icon="el-icon-search" @click="loadObjs">查询</el-button>
          <el-button type="primary" size="mini" icon="el-icon-plus"
                     @click="showAddView">
            添加直播活动
          </el-button>
        </div>

      </div>



    <el-main style="padding-left: 0px;padding-top: 0px">
      <div class="table-box">
        <el-table
          :data="objs"
          v-loading="tableLoading"
          border
          stripe
          @selection-change="handleSelectionChange"
          size="mini"
          style="width: 100%">
          <el-table-column
            type="selection"
            align="left"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="名称"
          >
          </el-table-column>

          <el-table-column
            prop="start_time"
            :formatter="dateFormat"
            label="开始时间">
          </el-table-column>

          <el-table-column
            prop="duration"
            label="时长(分钟)"
          >
          </el-table-column>


          <el-table-column
            prop="permission"
            :formatter="toPermissionLabel"
            label="状态"
          >



          </el-table-column>



          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button @click="showEditView(scope.row)" type="text"
                         size="mini">编辑
              </el-button>
              <el-button type="text" size="mini" v-if="scope.row.permission==0"
                         @click="deleteObj(scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          background
          :page-size="10"
          :current-page="currentPage"
          @current-change="currentChange"
          layout="prev, pager, next"
          :total="totalCount">
        </el-pagination>
        <div class="form-edit-btns" style="float:right">
          <el-button type="danger" size="mini" v-if="objs.length>0" :disabled="multipleSelection.length==0"
                     @click="deleteMany">批量删除
          </el-button>
        </div>
      </div>
    </el-main>

    <el-dialog
      :title="dialogTitle"
      style="padding: 0px;"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      width="77%">

    <el-form :model="obj" :rules="rules" ref="addForm" size="mini" label-width="100px">


            <el-form-item label="名称:" prop="name">
              <el-input prefix-icon="el-icon-edit" v-model="obj.name" size="mini"
                        placeholder="请输入直播活动名称"></el-input>
            </el-form-item>





            <el-form-item label="时长(分钟)" prop="duration">
              <el-input-number prefix-icon="el-icon-edit" v-model="obj.duration" size="mini"
                               :min="1" :max="600"    placeholder="请输入直播时长"></el-input-number>
            </el-form-item>





            <el-form-item label="开始时间" prop="start_time">
            <el-date-picker
              v-model="obj.start_time"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
            </el-form-item>


            <el-form-item label="回放截至时间" prop="end_time">
              <el-date-picker
                v-model="obj.end_time"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>

          <el-form-item label="免费试看" prop="can_view">
            <el-radio-group v-model="obj.can_view">
              <el-radio :label=0>不免费</el-radio>
              <el-radio :label=1>免费</el-radio>
            </el-radio-group>
          </el-form-item>
            <!--<el-form-item label="课程" prop="course_id">-->
              <!--<el-select v-model="obj.course_id" placeholder="请选择">-->
                <!--<el-option-->
                  <!--v-for="item in course_options"-->
                  <!--:key="item.id"-->
                  <!--:label="item.name"-->
                  <!--:value="item.id">-->
                <!--</el-option>-->
              <!--</el-select>-->
            <!--</el-form-item>-->





            <el-form-item label="直播老师" prop="broadcast_by">
              <el-select v-model="obj.broadcast_by" placeholder="请选择">
                <el-option
                  v-for="item in teacher_options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>

      <el-form-item label="上传文件">
        <UploadAuth @sendValueToParent = "getValueFromChild" @sendButtonStatusToParent = "getButtonStatus" />
      </el-form-item>

      <el-form-item label="video_id:" prop="video_id">
        <el-input prefix-icon="el-icon-edit" v-model="obj.video_id" size="mini"
                  placeholder="请输入video_id(可选项)"></el-input>
      </el-form-item>



      <el-form-item>
        <el-button size="mini"  @click="cancelEidt">取 消</el-button>
        <el-button size="mini" :disabled="disabledButton" type="primary" @click="add('addForm')">确 定</el-button>
      </el-form-item>


    </el-form>

    </el-dialog>

    </div>




</template>
<script>
  import ElRow from "element-ui/packages/row/src/row";
  import UploadAuth from '@/components/common/aliyun/UploadAuth'

  export default {
    components: {ElRow,UploadAuth},
    data() {
      return {
        objs: [],
        dialogTitle: '',
        multipleSelection: [],
        course_options:[],
        teacher_options:[],
        totalCount: -1,
        currentPage: 1,
        dialogVisible: false,
        tableLoading: false,
        permission:'',
        obj: {
          name: '',
          duration:'',
          start_time:'',
	        end_time:'',
          course_id:this.$route.query.course_id,
          broadcast_by:'',
          permission:0,
	        video_id:null,
	        file_name:null,
	        can_view:0
        },
        rules: {
          name: [{required: true, message: '必填:请输入直播活动名称', trigger: 'blur'}],
          duration: [{required: true, message: '必填:请输入直播时长', trigger: 'blur'}],
          start_time: [{required: true, message: '必填:请输入直播开始时间', trigger: 'blur'}],
	        end_time: [{required: true, message: '必填:请输入回放截至时间', trigger: 'blur'}],
          broadcast_by: [{required: true, message: '必填:请选择直播老师', trigger: 'blur'}],
	        can_view: [{required: true, message: '必填:请选择是否免费', trigger: 'blur'}]
        }
      };
    },
    mounted: function () {
      this.loadObjs();
      this.loadTeacherList();
      // this.loadCourses();
    },
    methods: {


      //时间格式化
      dateFormat:function(row, column) {
        var date = row[column.property];
        if (date == undefined) {
          return "";
        }
        return moment(date).format("YYYY-MM-DD HH:mm:ss");
      },

      toPermissionLabel:function (row) {
        if (row.permission==0) {
          return "待审核";
        } else if (row.permission==1) {
          return "通过";
        } else if (row.permission==-1) {
          return "未通过";
        }
      },

      loadTeacherList() {
        var _this = this;
        this.tableLoading = true;
        this.postRequest("/user/getTeacherList").then(resp=> {
          this.tableLoading = false;
          if (resp && resp.status == 200) {
            var data = resp.data;
            _this.teacher_options = data.data.arrays;
          }
        })
      },
	    getValueFromChild(videoId,fileName) {
		    //console.log(videoId);
		    this.obj.video_id = videoId;
		    this.obj.file_name = fileName;
	    },
	    getButtonStatus(disableButton) {
		    this.disabledButton = disableButton;
	    },

      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      deleteMany(){
        this.$confirm('此操作将删除[' + this.multipleSelection.length + ']条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var ids = '';
          for (var i = 0; i < this.multipleSelection.length; i++) {
            ids += this.multipleSelection[i].id + ",";
          }
          this.doDelete(ids);
        }).catch(() => {
        });
      },
      deleteObj(row){
        this.$confirm('此操作将永久删除[' + row.name + '], 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.doDelete(row.id);
        }).catch(() => {
        });
      },


      doDelete(ids){
        this.tableLoading = true;
        var _this = this;
        this.deleteRequest("/activity/delete/" + ids).then(resp=> {
          _this.tableLoading = false;
          if (resp && resp.status == 200) {
            var data = resp.data;
            _this.$message({type: data.status, message: data.msg});
            _this.loadObjs();
          }
        })
      },


      currentChange(currentChange){
        this.currentPage = currentChange;
        this.loadObjs();
      },
      loadObjs(){
        var _this = this;
        this.tableLoading = true;
        this.getRequest("/activity/list?page=" + this.currentPage + "&size=10&permission="+this.permission+"&course_id="+this.$route.query.course_id).then(resp=> {
          this.tableLoading = false;
          if (resp && resp.status == 200) {
            var data = resp.data;
            _this.objs = data.data.arrays;
            _this.totalCount = data.data.count;
          }
        })
      },



      add(formName){
        var _this = this;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.obj.id) {
              //更新
              this.tableLoading = true;
              this.postRequest("/activity/update", this.obj).then(resp=> {
                _this.tableLoading = false;
                if (resp && resp.status == 200) {
                  var data = resp.data;
                  _this.$message({type: data.status, message: data.msg});
                  _this.dialogVisible = false;
                  _this.emptyObjData();
                  _this.loadObjs();
                }
              })
            } else {
              //添加
              this.tableLoading = true;
              this.postRequest("/activity/add", this.obj).then(resp=> {
                _this.tableLoading = false;
                if (resp && resp.status == 200) {
                  var data = resp.data;
                  _this.$message({type: data.status, message: data.msg});
                  _this.dialogVisible = false;
                  _this.emptyObjData();
                  _this.loadObjs();
                }
              })
            }
          } else {
            return false;
          }
        });
      },
      cancelEidt(){
        this.dialogVisible = false;
        this.emptyObjData();
      },
      showEditView(row){
        //console.log(row)
        this.dialogTitle = "编辑直播活动";
        this.obj.name = row.name;
        this.obj.duration = row.duration;
        this.obj.start_time = moment(row.start_time).utcOffset(480).format("YYYY-MM-DD HH:mm:ss");
	      this.obj.end_time = moment(row.end_time).utcOffset(480).format("YYYY-MM-DD HH:mm:ss");
        this.obj.broadcast_by = row.broadcast_by;
        this.obj.permission = row.permission;
        this.obj.id = row.id;
	      this.obj.video_id = row.video_id;
	      this.obj.file_name = row.file_name;
	      this.obj.can_view = row.can_view;
        this.dialogVisible = true;
      },


      showBroadcastURLView(row) {
        var _this = this;

        this.postRequest("/activity/url/get", {id:row.id}).then(resp=> {
          _this.tableLoading = false;
          if (resp && resp.status == 200) {
            var data = resp.data;
            this.$alert(data.data.url, '直播URL', {
              confirmButtonText: '确定'
            });
          }
        })



      },


      showAddView(){
        this.dialogTitle = "添加直播活动";
        this.dialogVisible = true;
        var _this = this;
      },
      emptyObjData(){
        this.obj = {
          name: '',
          duration:'',
          permission:0,
          can_view:0,
          course_id:this.$route.query.course_id,
          start_time:'',
          broadcast_by:'',
	        video_id: '',
	        file_name: ''

        }
      }
    }
  };
</script>
<style scoped>
  .el-dialog__body {
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .slide-fade-enter-active {
    transition: all .8s ease;
  }

  .slide-fade-leave-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }

  .slide-fade-enter, .slide-fade-leave-to {
    transform: translateX(10px);
    opacity: 0;
  }
</style>
